<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue2.x</title>
</head>
<body>
    <script>
      var documentElement = document.documentElement;
      function callback() {
          var clientWidth = documentElement.clientWidth;
          // 屏幕宽度大于780，不在放大
          clientWidth = clientWidth < 780 ? clientWidth : 780;
          documentElement.style.fontSize = clientWidth / 10 + 'px';
      }
      document.addEventListener('DOMContentLoaded', callback);
      window.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', callback);
    </script>
  <div id="app">
    <lucky-wheel
      ref="myLucky"
      width="10rem"
      height="10rem"
      :blocks="blocks"
      :prizes="prizes"
      :buttons="buttons"
      :default-style="defaultStyle"
      @start="click"
      @end="end"
    />
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.2.4/dist/vue-composition-api.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-demi@0.11.4/lib/index.iife.js"></script>
  <script src="./dist/index.umd.js"></script>
  <script>
    console.log(window.getComputedStyle(document.documentElement).fontSize)
    var vm = new Vue({
      el: '#app',
      data: {
        blocks: [{ padding: '13px', background: '#d64737' }],
        prizes: [
          { title: '1元红包', background: '#f9e3bb', fonts: [{ text: '1元红包', top: '18%' }], range: 0.1 },
          { title: '100元红包', background: '#f8d384', fonts: [{ text: '100元红包', top: '18%' }], range: 0.2 },
          { title: '0.5元红包', background: '#f9e3bb', fonts: [{ text: '0.5元红包', top: '18%' }] },
          { title: '2元红包', background: '#f8d384', fonts: [{ text: '2元红包', top: '18%' }] },
          { title: '10元红包', background: '#f9e3bb', fonts: [{ text: '10元红包', top: '18%' }] },
          { title: '50元红包', background: '#f8d384', fonts: [{ text: '50元红包', top: '18%' }] },
        ],
        buttons: [
          { radius: '50px', background: '#d64737' },
          { radius: '45px', background: '#fff' },
          { radius: '41px', background: '#f6c66f', pointer: true },
          {
            radius: '35px', background: '#ffdea0',
            fonts: [{ text: '开始\n抽奖', fontSize: '18px', top: -18 }]
          }
        ],
        defaultStyle: { fontColor: '#d64737', fontSize: '14px' },
      },
      methods: {
        click () {
          this.$refs.myLucky.play()
          setTimeout(() => {
            this.$refs.myLucky.stop()
          }, 100)
        },
        end (prize) {
          console.log(prize.fonts[0].text)
        }
      }
    })
  </script>
</body>
</html>